<template>
  <div class="dashboard-container">
    <h2>租赁信息</h2>
    <div class="dashboard-text">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="订单号：">
          {{ ruleForm.id }}
        </el-form-item>
        <el-form-item label="房屋名称：">
          {{ ruleForm.houseInfo.title }}
        </el-form-item>
        <el-form-item label="门牌号：">
          {{ ruleForm.houseInfo.propertyId }}
        </el-form-item>
        <el-form-item label="租赁人：">
          {{ ruleForm.userInfo.username || "-" }}
        </el-form-item>
        <el-form-item label="联系方式：">
          {{ ruleForm.userInfo.phone || "-" }}
        </el-form-item>
        <el-form-item label="租赁期限："> {{ ruleForm.term }}年 </el-form-item>

        <el-form-item label="租赁总额：">
          ￥{{ (ruleForm.totalPrice / 100).toFixed(2) }}
        </el-form-item>
        <el-form-item label="状态：">
          {{ stateOptions.filter((v) => v.value === ruleForm.state)[0].label }}
        </el-form-item>

        <el-form-item>
          <el-button
            v-if="ruleForm.state === stateObj.PAYED"
            type="primary"
            @click="onPass"
            >通过审核</el-button
          >
          <el-button
            v-if="ruleForm.state === stateObj.CHECK_IN"
            type="primary"
            @click="onEnd"
            >退租</el-button
          >
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  createOrderDetail,
  getOrderDetail,
  updateOrderDetail,
} from "@/api/order";
export default {
  name: "Dashboard",
  components: {},
  data() {
    return {
      action: process.env.VUE_APP_BASE_UPLOAD,
      ruleForm: {},
      tableData: [],

      stateOptions: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "待支付",
          value: 0,
        },
        {
          label: "已支付，待审核",
          value: 1,
        },
        {
          label: "入住中",
          value: 2,
        },
        {
          label: "已退租",
          value: 3,
        },
      ],
      stateObj: {
        PRE_PAY: 0, //待支付
        PAYED: 1, //已支付/审核中
        CHECK_IN: 2, //入住中
        OUT: 3, //已退租
      },
    };
  },
  computed: {
    type() {
      return this.$route.query.type;
    },
  },
  created() {
    this.handleGetDetail();
  },
  methods: {
    async handleGetDetail() {
      if (!this.$route.query.id) return;
      const res = await getOrderDetail({
        id: this.$route.query.id,
      });
      if (res.code === 200) {
        this.ruleForm = Object.assign({}, res.data);
      }
    },
    onPass() {
      this.ruleForm.state = this.stateObj.CHECK_IN;
      this.$nextTick(() => {
        this.handleSaveContent();
      });
    },
    onEnd() {
      this.ruleForm.state = this.stateObj.OUT;
      this.$nextTick(() => {
        this.handleSaveContent();
      });
    },
    handleSaveContent() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.ruleForm));
          const api =
            this.type === "add" ? createOrderDetail : updateOrderDetail;
          const res = await api({
            ...form,
          });
          if (res.data && res.code === 200) {
            this.$message.success(
              `${this.type === "add" ? "新建" : "保存"}成功`
            );
            this.$router.back();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    margin-bottom: 30px;
  }
}
.el-input,
.el-textarea {
  width: 300px;
}
.box {
}
.box-card {
  display: inline-block;
  width: 32%;
  margin-right: 1%;
  .header {
    display: flex;
    align-items: flex-start;
  }
}
.checkbox-group {
  width: 380px;
}
.scope-box {
  .scope-item {
    margin-right: 1%;
    display: inline-block;
    width: 20%;
  }
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-upload--picture-card {
    display: inline-block !important;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
